import React from 'react';
import { connect } from 'dva';
import { Card, Row, Col } from 'antd';

// const colorArr = ['#FA5F5E', '#7FCF94', '#EEC86D', '#85AED6', '#7183A1']
const colorArr = ['#EEC86D', '#85AED6', '#FEBC16', '#7FCF94', '#FA5F5E']
/**
 * 组合资产图表:CategoryAssetsCharts	
 */
import { IECharts } from '../../../components';
const CategoryAssetsCharts = ({
    fieldList = [],
    list = [],
    colors = colorArr
}) => {
    const data = []
    let total = 0
    function compare(property) {
        return function (a, b) {
            var value1 = a[property];
            var value2 = b[property];
            return value1 - value2;
        }
    }
    list.sort(compare('id'))
    list.map(item => {
        data.push({
            name: item.name,
            value: item.lastMoney,
            increase: item.increase
        })
        total+=item.lastMoney
    })
    


    const myProps = {
        option: {
            color: colors,
            title: {
                text: `${total}亿`,
                subtext: '组合资产规模',
                top: '35%',
                left: 'center',
                textStyle: {
                    fontSize: 24,
                    color: '#4B4B4B'
                },
                subtextStyle: {
                    color: '#4B4B4B',
                    fontSize: 12,
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: (p) => {
                    return `${p.data.name}：${p.data.value}亿元`
                },
            },
            legend: {
                show: false,
            },
            series: [
                {
                    name: '组合资产规模',
                    type: 'pie',
                    radius: ['75%', '90%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data
                }
            ]
        }
    }
    return (
        <div style={{ height: 200 }}>
            <IECharts {...myProps}  resizable={true} />
        </div>
    );

}

/**
 * 类别资产:CategoryAssets
 * 子组件
 * 组合资产图表:CategoryAssetsCharts		
 */
import DefinitionList from '../../../components/DefinitionList'

class CategoryAssets extends React.Component {
    state = {
        data: JSON.parse(JSON.stringify(this.props.categoryAssets)),
    }

    componentDidMount() {
        this.fetchData(this.props)
    }
    componentWillReceiveProps(nextProps) {

        if ((nextProps.lPortId !== this.props.lPortId) || (nextProps.date !== this.props.date)) {
            this.fetchData(nextProps)
        }
        if (nextProps.categoryAssets !== this.props.categoryAssets) {

            this.setState({
                data: nextProps.categoryAssets,
            })

        }
    }
    //查询数据
    fetchData = (props) => {
        props.dispatch({
            type: 'combinatorialAnalysis/getCategoryAssets2',
            payload: props
        })
    }

    render() {

        return (
            <Row className="categoryAssets">
                <Col span={9}>
                    <CategoryAssetsCharts {...this.props.categoryAssets} />
                </Col>
                {
                    this.state.data.list && this.state.data.list.map((item, i) => (
                        <Col span={3} key={i} style={{paddingTop:60}}>
                            <dl>
                                <dt><span style={{ color: colorArr[i] }}>●</span>{item.name}</dt>
                                <dd><b>{item.lastMoney}</b>亿</dd>
                                <dd><b>{item.lastRatio.toPercent().split('%')[0]}</b>%</dd>
                            </dl>
                        </Col>
                    ))
                }
            </Row>

        )
    }
}

CategoryAssets.defaultProps = {
    lPortId: null,
    ratioBegindate: null,//  分类占比 开始时间
    ratioEnddate: null,//  分类占比 结束时间
    categoryAssets: {
        "fieldList": [
            {
                "id": "name",
                "name": "类别资产规模"
            },
            {
                "id": "firstMoney",
                "name": "期初金额"
            },
            {
                "id": "firstRatio",
                "name": "期初占比"
            },
            {
                "id": "lastMoney",
                "name": "期末金额"
            },
            {
                "id": "lastRatio",
                "name": "期末占比"
            },
            {
                "id": "increase",
                "name": "较上期"
            }
        ],
        "list": [
            {
                "name": "股票",
                "firstMoney": 1020,
                "firstRatio": 0.23,
                "lastMoney": 2340,
                "lastRatio": -0.12,
                "increase": 0.78
            }
        ]
    }
}

export default connect()(CategoryAssets)